<template>
	<Table
		filter
		:selection="mode === 'choose'"
		v-bind="tableOpts"
		v-on="tableEvent"
	>
		<template #operator>
			<div class="operator-wrap" v-if="mode == 'table'">
				<modifyProduct ref="dialogRef" @change="fetchCurrentTable" />
			</div>
		</template>
	</Table>
</template>

<script>
import { html2Img } from "@/utils/index.js";
import tableMixins from "@/mixins/tableMixins.vue";
import modifyProduct from "./components/modifyProduct.vue";
import { mapActions } from "vuex";
export default {
	name: "ProductManage",
	mixins: [tableMixins],
	components: {
		modifyProduct,
	},
	props: {
		mode: {
			type: String,
			default: "table", // table choose
		},
	},
	data() {
		return {
			apiName: "getMaterial",
			form: {
				productName: {
					tag: "el-input",
					label: "产品名称",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入产品名称",
					},
				},
				productCode: {
					tag: "el-input",
					label: "产品编码",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入产品编码",
					},
				},
				directoryId: this.formDirectoryId(),
			},
		};
	},
	computed: {
		columns() {
			const { mode } = this;
			const name = this.$options.name;
			let res = this.$columns[name] || [];
			if (mode == "choose") {
				res = res.filter((e) => !["actions", "sortIndex"].includes(e.prop));
				res = [].concat(
					[
						{
							label: "",
							type: "selection",
							minWidth: "60px",
						},
					],
					res
				);
			}
			return res;
		},
	},
	activated() {
		this.refreshDirectory();
	},
	methods: {
		...mapActions(["refreshDirectory"]),
		formatData(res) {
			this.formatProduct(res);
		},
		handleAction(opts, row) {
			const { productName: name, id } = row;
			 
			if (opts === "edit") this.showDialog(opts, row);
			else if (opts === "delete")
				this.showConfirm(`确认删除【${name}】？`, "deleteMaterial", { 
			id:id
		 });
			else if (opts === "off")
				this.showConfirm(`确认下架【${name}】？`, "patchMaterial", {
					materialStatus: 0,
					id,
				});
			else if (opts === "on")
				this.showConfirm(`确认上架【${name}】？`, "patchMaterial", {
					materialStatus: 1,
					id,
				});
			else if (opts === "qrcode") this.getQrcode(row);
		},
		getQrcode(row) {
			const { productName: name, productCode, id } = row;
			this.$prompt("请输入库存数量", "生成库存二维码", {
				inputPlaceholder: "请输入库存数量",
				inputType: "number",
				inputValidator: (value) => {
					let count = parseInt(value);
					if (isNaN(count)) return "请输入正确的库存数量";
					return true;
				},
			}).then((prompt) => {
				const { value } = prompt;
				let count = parseInt(value);
				if (!isNaN(count))
					this.$api.qrcodeMaterial({ id, count }).then((res) => {
						const download = `${productCode}_${name}_${count}.png`;
						// 产品名称name 数量count
						this.$confirm(
							`<div id="qrcode">
								<img src="${res}" style="width: 100%">
								<div class="info">
									<span>编码：${productCode}</span>
									<span>产品：${name}</span>
									<span>数量：${count}</span>
								</div>
							</div>`,
							`二维码：${download}`,
							{
								cancelButtonText: "取消",
								confirmButtonText: "下载",
								dangerouslyUseHTMLString: true,
							}
						).then((e) => {
							if (e === "confirm") {
								const html = document.getElementById("qrcode");
								html2Img({
									html,
								}).then((base64) => {
									let link = document.createElement("a");
									link.href = base64;
									link.download = download;
									link.click();
								});
							}
						});
					});
			});
		},
	},
};
</script>

<style lang="less" scoped></style>

